<template>
	<view class="container" id="adopt">
		<!-- 导航栏 -->
		<my-nav :title="'领小咪'" :city=city @selectCity="selectCity"></my-nav>
		<!-- 头部图片 -->
		<view class="adopt_top">
			<!-- <view class="t_one">领小咪</view>
			<view class="t_tow">一个专注猫咪领养的平台</view> -->
		</view>
		<!-- 列表 -->
		<view class="n_list">
			<view class="n_item" v-for="(item,i) in list" :key="item.id" @click="jumpDetail(item.id)">
				<!-- 宠物图片 -->
				<block v-if="item.img">
					<image class="n_img" :src="IMG_URL+item.img" mode="aspectFit" ></image>
				</block>
				<block v-else>
					<image class="n_img" :src="item.cover" mode="aspectFit" ></image>
				</block>
				<view class="n_content">
					<!-- 宠物信息 -->
					<view class="n_msg">
						<text class="msg_left">{{item.type}}</text>
						<view class="msg_right">
							<icon :class="{'icon_sex_gg' : item.sex==1 ? true :false ,'icon_sex_mm':item.sex==2 ? true :false}"></icon>
							<text>{{item.birth}}</text>
						</view>
					</view>
					<!-- 地址 -->
					<view class="n_address">
						<icon class="icon_address"></icon>
						<text>{{item.city}}{{item.district}}</text>
					</view>
					<!-- 点赞评论数 -->
					<view class="n_operation">
						<view class="n_comment">
							<icon class="icon_like"></icon>
							<text>{{item.like}}</text>
						</view>
						<view class="n_comment">
							<icon class="icon_comment"></icon>
							<text>{{item.comment}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="state"></uni-load-more>
	</view>
</template>

<script>
	const app = getApp();
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import myNav from "@/wxcomponents/my-nav/my-nav.vue"
	import {
		formatTime
	} from '@/util/time.js'
	import {
		lxmPage
	} from '@/api/index.js'
	// import {
	// 	IMG_URL
	// } from '@/util/config.js'
	export default {
		components: {
			uniLoadMore,
			myNav
		},
		data() {
			return {
				page: 1,
				total: 1, //总页数
				list: [], //列表
				IMG_URL: app.globalData.IMG_URL, //地址前缀
				state: 'more',
				city: '全国' //城市
			}
		},
		methods: {
			// 获取列表
			lxmPage() {
				this.state = 'loading'
				lxmPage({
					page: this.page,
					city: this.city == '全国' ? '' : this.city
				}).then(res => {
					uni.stopPullDownRefresh() //停止刷新
					res.list.forEach(val => {
						val.birth = formatTime(parseInt(val.birth))
					})
					this.list = this.list.concat(res.list)
					this.total = res.total
					if (res.pagenum == res.total || res.total==0) {
						this.state = 'noMore'
					} else {
						this.state = 'more'
					}
				})
			},
			// 跳转详情
			jumpDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},

			// 选择城市
			selectCity(city) {
				this.city = city;
				this.page = 1;
				this.list = [];
				this.lxmPage();
			},
		},
		onLoad() {
			this.lxmPage(); //获取列表
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.lxmPage();
		},

		// 上拉加载
		onReachBottom() {
			if (this.page === this.total) {
				return false;
			}
			this.page += 1;
			this.lxmPage();
		},
	}
</script>

<style lang="scss">
	#adopt {
		.adopt_top {
			width: 100%;
			height: 180rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-lmbeij.jpg) no-repeat;
			background-size: cover;
			padding: 44rpx 38rpx 36rpx;
			box-sizing: border-box;
			margin-bottom: 22rpx;
			border-radius: 20rpx;

			.t_one {
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				margin-bottom: 10rpx;
			}

			.t_tow {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.n_list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.n_item {
				width: 332rpx;
				border-radius: 18rpx;
				box-shadow: 0rpx 0rpx 10rpx #D3D3D3;
				margin-bottom: 30rpx;

				.n_img {
					width: 100%;
					height: 428rpx;
					border-radius: 18rpx 18rpx 0 0;
					background: #F8F8F8;
				}

				.n_content {
					padding: 16rpx;

					.n_msg {
						color: #333333;
						font-size: 30rpx;
						font-weight: 600;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 8rpx;

						.msg_right {
							display: flex;
							align-items: center;
							color: #FFFFFF;
							font-size: 18rpx;

							.icon_sex {
								width: 28rpx;
								height: 28rpx;
								background: url(../../static/image/sex-gg.png) no-repeat;
								background-size: cover;
								margin-right: 8rpx;
							}

							&>text {
								padding: 0 10rpx;
								height: 28rpx;
								background: rgba(252, 95, 95, 0.08);
								color: #FC8F8F;
								border-radius: 17rpx;
								text-align: center;
								line-height: 28rpx;
							}
						}
					}

					.n_address {
						font-size: 22rpx;
						color: #999999;
						display: flex;
						align-items: center;
						margin-bottom: 22rpx;

						.icon_address {
							display: block;
							width: 22rpx;
							height: 26rpx;
							background: url(../../static/image/icon-i-address.png) no-repeat;
							background-size: cover;
							margin-right: 10rpx;
						}

						&>text {
							flex: 1;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.n_operation {
						color: #666666;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.n_comment {
							display: flex;
							align-items: center;

							.icon_like {
								width: 30rpx;
								height: 30rpx;
								background: url(../../static/image/like.png) no-repeat;
								background-size: cover;
								margin-right: 7rpx;
							}

							.icon_comment {
								width: 30rpx;
								height: 30rpx;
								background: url(../../static/image/comment.png) no-repeat;
								background-size: cover;
								margin-right: 7rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
